<template>
    <div class="articleInfo-container">
        <van-cell>
            <!-- 标题区域的插槽 -->
            <template #title>
                <div class="title-box">
                    <!-- 标题 -->
                    <span>{{title}}</span>
                </div>
                <!-- 三张图片 -->
                <div class="thumb-box">
                    <span>{{content}}</span>
                </div>
            </template>
            <!-- label 区域的插槽 -->
            <template #label>
                <div class="label-box">
                    <span>作者：{{authorName}} &nbsp;&nbsp; 评论数：{{cmtCount}} &nbsp;&nbsp; 发布日期：{{pushDate}}</span>
                    <!-- 关闭按钮 -->
                    <van-icon name="cross"/>
                </div>
            </template>
        </van-cell>
    </div>
</template>
<script>
    export default {
        name: "ArticleInfo",
        props: {
            title: {
                type: String,
                default: ''
            },
            content: {
                type: String,
                default: ''
            },
            authorName: {
                type: String,
                default: ''
            },
            //评论数可能是数字或者字符串
            cmtCount: {
                type: [String, Number],
                default: 0
            },
            pushDate:{
                type: String,
                default:''
            }
        }
    }
</script>

<style lang="less" scoped>
    .articleInfo-container {
        .label-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .thumb {
            // 矩形黄金比例：0.618
            width: 113px;
            height: 70px;
            background-color: #f8f8f8;
            object-fit: cover;
        }

        .title-box {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .thumb-box {
            display: flex;
            justify-content: space-between;
        }

    }
</style>